// 轮播图
// 获取元素
window.onload = function () {
    let bodyEL = document.getElementsByTagName('body');
    let bannerEl = document.querySelector('.banner');
    let picturesEl = document.querySelector('.pictures');
    let contentList = document.querySelectorAll('.pic');
    let dotList = document.querySelectorAll('.dot');
    let imgWidth = bannerEl.offsetWidth;
    

    picturesEl.innerHTML += picturesEl.innerHTML;

    let startPointX = 0; //手指按下时的坐标
    let startLeft = 0; //手指按下时距离屏幕左边的位置
    let movePointX = 0; //手指移动的距离
    let currentIndex = 0;
    let lastIndex = 0;
    let timer = null;
    // 初始化数据
    picturesEl.style.transform = 'translateX(0px)';

    // 设置事件
    bannerEl.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        picturesEl.style.transition = null;

        if (currentIndex == 0) {
            currentIndex = contentList.length;
        }
        if (currentIndex == 2 * (contentList.length) - 1) {
            currentIndex = contentList.length - 1;
        }
        picturesEl.style.transform = `translateX(${-currentIndex * imgWidth}px)`;

        startPointX = e.touches[0].pageX;
        startLeft = parseFloat(picturesEl.style.transform.split('(')[1]);
    })

    bannerEl.addEventListener('touchmove', function (e) {
        movePointX = e.touches[0].pageX - startPointX;
        // console.log(movePointX);
        picturesEl.style.transform = `translateX(${startLeft+movePointX}px)`;
    });

    bannerEl.addEventListener('touchend', function (e) {
        let backWidth = imgWidth / 5;
        if (Math.abs(movePointX) > backWidth) {
            // 移动距离大于设置回弹范围，则显示下一张图片
            // 小圆点
            if (movePointX > 0) {
                currentIndex--;
                if (currentIndex < 0) {
                    currentIndex = contentList.length - 1;
                }
            }
            if (movePointX < 0) {
                currentIndex++;
            }
        }
        picturesEl.style.transition = '.5s';
        picturesEl.style.transform = `translateX(${-currentIndex * imgWidth}px)`

        // 小圆点
        var dotIndex = currentIndex % (contentList.length);
        dotList[lastIndex].classList.remove('active');
        dotList[dotIndex].classList.add('active');
        lastIndex = dotIndex;
        autoPlay();
    });




    // 自动轮播设置
    function changeContent() {
        currentIndex++;
        picturesEl.style.transition = '.5s';
        picturesEl.style.transform = `translateX(${-currentIndex * imgWidth}px)`;

        picturesEl.addEventListener('transitionend', function () {
            if (currentIndex >= 2 * contentList.length - 1) {
                currentIndex = contentList.length - 1;
            }
            picturesEl.style.transition = null;
            picturesEl.style.transform = `translateX(${-currentIndex * imgWidth}px)`;
        })

        var dotIndex = currentIndex % (contentList.length);
        dotList[lastIndex].classList.remove('active');
        dotList[dotIndex].classList.add('active');
        lastIndex = dotIndex;
    }

    function autoPlay() {
        timer = setInterval(() => {
            changeContent()
        }, 2000)
    }
    autoPlay();

}